---
title: Настройка редактора
description: Настройте ваш редактор для работы с Astro.
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Настройте ваш редактор, чтобы улучшить опыт разработки и разблокировать новые функции Astro.

## VS Code

[VS Code](https://code.visualstudio.com/) - популярный редактор кода для веб-разработчиков, созданный Microsoft. Движок VS Code также обеспечивает работу популярных внутрибраузерных редакторов кода, таких как [GitHub Codespaces](https://github.com/features/codespaces) и [Gitpod](https://gitpod.io/).

Astro работает с любым редактором кода. Однако VS Code является нашим рекомендуемым редактором для Astro проектов. Мы поддерживаем официальное [расширение Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode), которое открывает несколько ключевых функций и улучшает работу разработчиков в проектах Astro.

- Подсветка синтаксиса для файлов с расширением `.astro`.
- Информация о типах TypeScript для файлов с расширением `.astro`.
- [VS Code Intellisense](https://code.visualstudio.com/docs/editor/intellisense) для автозавершения кода, подсказок и многого другого.

Для начала раьботы установите [расширение Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Посмотрите, как [настроить TypeScript](/ru/guides/typescript/) в вашем проекте Astro.</ReadMore>

## IDE JetBrains

Поддержка Astro была добавлена в WebStorm 2023.1. Вы можете установить официальный плагин через [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) или выполнив поиск "Astro" во вкладке Плагины IDE. Этот плагин включает функции, такие как подсветка синтаксиса, автозавершение кода и форматирование, а также планирует добавить еще более продвинутые возможности в будущем. Он также доступен для всех других [IDE JetBrains с поддержкой JavaScript](https://www.jetbrains.com/products/#lang=js&type=ide).


## Другие редакторы кода

Наше потрясающее сообщество поддерживает несколько расширений для других популярных редакторов, включая:

- [Расширение VS Code на Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">Оффициальное</Badge></span> - Оффициальное расширение Astro VS Code, доступное в реестре Open VSX для открытых платформ, таких как [VSCodium](https://vscodium.com/)
- [Расширение Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">Сообщество</Badge></span> - Предоставляет подсветку синтаксиса и автозавершение кода для Astro в Nova
- [Плагин Vim](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Сообщество</Badge></span> - Предоставляет подсветку синтаксиса, выравнивание и поддержку сворачивания кода для Astro в Vim или Neovim
- Плагины Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) и [TreeSitter](https://github.com/virchau13/tree-sitter-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Сообщество</Badge></span> - Предоставляют подсветку синтаксиса, парсинг синтаксического дерева, и автозавершение кода для Astro в Neovim
- Emacs - См. инструкции по [настройке Emacs и Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Сообщество</Badge></span> для работы с Astro
- [Подсветка синтаксиса Astro для Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Сообщество</Badge></span> - Пакет Astro для Sublime Text, доступный в менеджере пакетов Sublime Text.

## Редакторы в браузере

Помимо локальных редакторов, Astro также хорошо работает в редакторах, запущенных в браузере, включая:

- [StackBlitz](https://stackblitz.com/) и [CodeSandbox](https://codesandbox.io/) - онлайн-редакторы которые запускаются в вашем браузере, со встроенной поддержкой подсветки синтаксиса для `.astro` файлов. Установка или настройка не требуется!
- [GitHub.dev](https://github.dev/) - позволяет вам установить расширение Astro VS Code как [веб-расширение](https://code.visualstudio.com/api/extension-guides/web-extensions), что дает доступ только к некоторым функциям полного расширения. В настоящее время поддерживается только подсветка синтаксиса.
- [Gitpod](https://gitpod.io/) - полноценная среда разработки в облаке, которая может установить оффициальное расширение Astro VS Code от Open VSX.

## Другие инструменты

### ESLint

[ESLint](https://eslint.org/) - популярный линтер для JavaScript и JSX. Для поддержки Astro можно установить [плагин, поддерживаемый сообществом](https://github.com/ota-meshi/eslint-plugin-astro).

См. [руководство пользователя проекта](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) для получения дополнительной информации о том, как установить и настроить ESLint для вашего проекта.

### Stylelint

[Stylelint](https://stylelint.io/) - популярный линтер для CSS. [Конфигурация Stylelint, поддерживаемая сообществом](https://github.com/ota-meshi/stylelint-config-html), предоставляет поддержку Astro.

Инструкции по установке, интеграции с редактором и дополнительная информация можно найти в README проекта.

### Prettier

[Prettier](https://prettier.io/) - популярный форматтер для JavaScript, HTML, CSS и многого другого. Если вы используете [расширение Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) или [сервер языка Astro в другом редакторе](#другие-редакторы-кода), поддержка форматирования кода с использованием Prettier включена.

Чтобы добавить поддержку форматирования файлов `.astro` вне редактора (например, через CLI) или в редакторах, которые не поддерживают наши инструменты редактирования, установите [официальный плагин Prettier для Astro](https://github.com/withastro/prettier-plugin-astro).

Чтобы начать, сначала установите Prettier и плагин:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install --save-dev prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add -D prettier prettier-plugin-astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add --dev prettier prettier-plugin-astro
  ```
  </Fragment>
</PackageManagerTabs>

Prettier автоматически обнаружит плагин и будет использовать его для обработки файлов .astro при запуске:

```shell
prettier --write .
```

Для получения дополнительной информации о поддерживаемых параметрах плагина, о том, как настроить Prettier внутри VS Code и многое другое, см. [README плагина Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md).
